<template>
  <div class="oe-category-management" v-loading="loading">
    <top-tip :showBack="false"></top-tip>
    <div class="oe-category-search">
      <span class="oe-search-label">分类：</span>
      <span class="oe-search-input">
        <a-input v-model="search" placeholder="输入考试分类名称" @keyup.13="getCaList"></a-input>
      </span>
      <span class="oe-search-label" style="margin-left: 20px">层级：</span>
      <span class="oe-search-select">
        <a-select v-model="level" style="width: 150px">
          <a-select-option value="全部">全部</a-select-option>
          <a-select-option value="1">第一级</a-select-option>
          <a-select-option value="2">第二级</a-select-option>
          <a-select-option value="3">第三级</a-select-option>
        </a-select>
      </span>
      <a-button type="primary" @click="getCaList">查询</a-button>
      <a-button type="primary" @click="eidtTitle('add')" v-if="operationList.includes('add/edit/del')">新增</a-button>  
    </div>
    <div class="oe-category-content">
      <div class="oe-category-content__table">
        <a-table :columns="columns" :dataSource="dataList" @change="onTableChange" :pagination="pagination">
          <span slot="operation" slot-scope="text, record">
            <a-tooltip placement="bottom" v-if="operationList.includes('add/edit/del')">
              <!-- <template slot="title">
                <span>编辑</span>
              </template> -->
              <span class="action-icon" @click.stop="eidtTitle(record)">
                <span class="oe-table-edit iconfont icon-edit" ></span>
                <span>编辑</span>
              </span>
            </a-tooltip>
            <a-tooltip placement="bottom" v-if="operationList.includes('add/edit/del')">
              <!-- <template slot="title">
                <span>删除</span>
              </template> -->
              <span class="action-icon" @click.stop="deleteExam(record)">
                <span class="oe-table-delete iconfont icon-delete" ></span>
                <span>删除</span>
              </span>
            </a-tooltip>
            <span v-if="!operationList.includes('add/edit/del')">--</span>
          </span>
        </a-table>
      </div>
    </div>
    <a-modal :title="title" centered v-model="visible" wrapClassName="oe-category-modal">
      <div class="oe-modal-container">
        <div class="oe-modal-label">
          <span class="oe-modal-name">*</span>
          <span class="oe-modal-text">分类名称：</span>
        </div>
        <div class="oe-modal-input">
          <a-input v-model="caName" placeholder="输入分类的名称" />
        </div>
      </div>
      <div class="oe-modal-container">
        <div class="oe-modal-label">
          <span class="oe-modal-text" style="margin-left: 0">父级分类：</span>
        </div>
        <div class="oe-modal-input">
          <a-select
            v-model="sortParentId"
            style="width: 100% !important"
            showSearch
            @change="Changesub"
            class="oe-tooltip-input"
            :allowClear="true"
            optionFilterProp="children"
            placeholder="请选择父级分类"
          >
            <a-select-option v-for="item in sortlist" :key="item.Id">
              {{ item.NodeName }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div slot="footer">
        <a-button type="primary" @click="sureModal">确认</a-button>
        <a-button class="oe-btn-delete" @click="visible = false">取消</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
//import oeUpload from '@/components/oe-upload/index.vue';
import topTip from '@/components/top-tip/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  name: 'categoryMangement',
  components: {
    topTip,
  },
  mixins: [GetOperationList],
  data() {
    return {
      // 分页配置
      pagination: {
        pageSizeOptions: ['10', '20', '50', '100', '1000'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
        },
        onChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
        },
        buildOptionText(props) {
          console.log(props);
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10,
        total: 0,
      },
      // 表标题
      columns: [
        {
          title: '序号',
          dataIndex: 'number',
          width: '7%',
          key: 'number',
          align: 'center',
        },
        {
          title: '名称',
          dataIndex: 'Title',
          width: '15%',
          key: 'Title',
          sorter: true,
          align: 'center',
        },
        {
          title: '层级',
          dataIndex: 'Level',
          width: '11%',
          key: 'Level',
          sorter: true,
          align: 'center',
        },
        {
          title: '父级',
          dataIndex: 'NodeName',
          width: '15%',
          key: 'NodeName',
          sorter: true,
          align: 'center',
        },
        {
          title: '创建人',
          dataIndex: 'CreatorName',
          width: '10%',
          key: 'CreatorName',
          sorter: true,
          align: 'center',
        },
        {
          title: '创建时间',
          dataIndex: 'DateCreated',
          width: '12%',
          key: 'DateCreated',
          sorter: true,
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '20%',
          key: 'operation',
          scopedSlots: { customRender: 'operation' },
          align: 'center',
        },
      ],
      // 数据列表
      dataList: [],
      // 分类名称
      caName: '',
      // modal可见
      visible: false,
      title: '编辑考试分类',
      loading: false,
      // 搜索分类名称
      search: '',
      // 图片的list
      fileList: [],
      // 点击的分类
      clickBatch: '',
      // 操作List
      operationList: [],
      // 、操作list
      IsOpList: [],
      sortlist: [],
      sortParentId: undefined,
      isId: [],
      level: '全部',
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getOperation();
    });
  },
  methods: {
    // 获取页面操作
    getOperation() {
      this.loading = true;
      this.GetOperationList().then((rst) => {
        this.loading = false;
        this.operationList = [];
        this.IsOpList = [];
        if (rst.code === 1) {
          if (rst.list.length) {
            rst.list.forEach((item) => {
              if (item.IsWrite) {
                this.operationList.push(item.Name);
              }
              this.IsOpList = rst.list;
            });
            // this.operationList = rst.list;
            console.log(this.operationList);
          }
          this.getCaList();
          this.getSortList();
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    // 点击table排序
    onTableChange(pagenation, filter, sort) {
      let sortOrder = '';
      if (sort.order) {
        if (sort.order == 'ascend') {
          sortOrder = sort.columnKey;
        } else if (sort.order == 'descend') {
          sortOrder = '-' + sort.columnKey;
        } else {
          sortOrder = '';
        }
      }
      this.getCaList(pagenation.current, pagenation.pageSize, sortOrder);
    },
    // 获取分类列表
    getCaList(current, pageSize, sort) {
      this.loading = true;
      this.$http
        .post('/api/design/Sort/getList', {
          title: this.search,
          page: current || 1,
          pageSize: pageSize || 10,
          sort: sort || '',
          level: this.level == '全部' ? '' : this.level,
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code == 1) {
            this.dataList = [];
            this.pagination.current = rst.pagination.pageIndex;
            this.pagination.pageSize = rst.pagination.pageSize;
            this.pagination.total = rst.pagination.totalCount;
            if (rst.list && rst.list.length) {
              rst.list.forEach((item, index) => {
                let number = (rst.pagination.pageIndex - 1) * rst.pagination.pageSize + index + 1;
                this.dataList.push({
                  number,
                  ...item,
                });
              });
            }
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    // 编辑title
    eidtTitle(val, data) {
      this.sortParentId = undefined;
      let type = 'add/edit/del';
      let index = this.IsOpList.findIndex((el) => {
        return el.Name === type;
      });
      if (index > -1) {
        // this.IsOpList[index].IsRead
        if (this.IsOpList[index].IsRead && !this.IsOpList[index].IsWrite) {
          this.$message.info('您没有该操作权限！');
          return;
        }
      }
      if (val == 'add') {
        this.title = '新增考试分类';
        this.getSortList(val.Id);
        this.caName = '';
        this.fileList = [];
        this.visible = true;
      } else {
        this.title = '编辑考试分类';
        this.getCaInfo(val.Id);
        this.getSortList(val.Id);
      }
    },
    Changesub() {
      console.log(this.sortParentId);
    },
    // 获取分类的信息
    getCaInfo(val) {
      this.loading = true;
      this.$http
        .post('/api/design/Sort/getInfo', {
          id: val,
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code === 1) {
            this.clickBatch = rst.batchInfo;
            this.caName = rst.batchInfo.Title;
            this.sortParentId = rst.batchInfo.ParentId;
            this.visible = true;
            if (!rst.batchInfo.CoverUrl) {
              this.fileList = [];
            } else {
              this.fileList = [
                {
                  uid: val,
                  docUrl: rst.batchInfo.CoverUrl,
                  url: rst.coverUrl,
                },
              ];
            }

            // this.file.url
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    // 判断是新增还是编辑
    sureModal() {
      if (this.title === '编辑考试分类') {
        this.addCategory(this.clickBatch);
      } else {
        this.addCategory();
      }
    },
    // 删除分类
    deleteExam(val) {
      let index = this.IsOpList.findIndex((el) => {
        return el.Name === 'add/edit/del';
      });
      if (index > -1) {
        // this.IsOpList[index].IsRead
        if (this.IsOpList[index].IsRead && !this.IsOpList[index].IsWrite) {
          this.$message.info('您没有该操作权限，请先进行添加！');
          return;
        }
      }
      this.loading = true;
      this.$http
        .post('/api/design/Sort/change', {
          id: val.Id,
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code == 1) {
            this.$message.success('删除成功');
            this.getCaList();
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    // 新增/编辑分类
    addCategory(val) {
      if (!val) {
        if (!this.caName) {
          this.$message.error('标题不允许为空');
          return;
        }
      }
      this.loading = true;
      let url = this.fileList.length ? this.fileList[0].docUrl || this.fileList[0].response.url : '';
      this.$http
        .post('/api/design/sort/save', {
          id: val ? val.Id : '',
          title: this.caName,
          coverUrl: url,
          parentId: this.sortParentId || '',
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code == 1) {
            this.visible = false;
            this.clickBatch = '';
            this.caName = '';
            this.fileList = '';
            this.$message.success(rst.msg);
            this.getCaList();
            this.getSortList();
            //
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    //获取分类sortlist
    getSortList(id) {
      this.$http
        .post('/api/design/sort/getSortList', {
          q: this.selectType,
        })
        .then((rst) => {
          this.sortlist = rst.list;
          if (id) {
            for (let i = 0; i < this.sortlist.length; i++) {
              if (this.sortlist[i].Id == id) {
                this.sortlist.splice(i, 1);
              }
            }
          }
        });
    },
  },
};
</script>
